<template>
  <div>
    <t-dialog
      placement="top"
      top="30px"
      header="导入外呼号码"
      :visible="isshow"
      @close="closefn"
      :footer="false"
      width="800px"
    >
      <dk-divider style="margin: 10px 0"></dk-divider>
      <dk-tabs v-model="activeTab" placement="top" @change="handleTabChange">
        <dk-tab-panel :value="1" label="批量导入">
          <t-form
            ref="form"
            :colon="true"
            reset-type="initial"
            scrollToFirstError="smooth"
            @submit="onSubmit"
            label-width="150px"
            style="margin-top: 20px"
          >
            <t-form-item label="第一步" name="num">
              <div>
                <span>下载批量导入的客户模版文件：</span>
                <t-button @click="downloadTemplate">下载客户资料模版</t-button>
                <div>注意：不同"话术模版"的"客户资料模版文件"可能不一样</div>
              </div>
            </t-form-item>

            <t-form-item label="第二步" name="name">
              <div>
                <span>上传客户资料文件：</span>
                <t-button>点击上传文件</t-button>
                <div>1.文件格式必须是.xls/.xlsx扩展名</div>
                <div>2.excel文件大小不能超过50M</div>
              </div>
            </t-form-item>
          </t-form>
        </dk-tab-panel>

        <dk-tab-panel :value="2" label="单个导入">
          <t-form
            ref="form"
            :rules="FORM_RULES"
            :data="formData"
            :colon="true"
            reset-type="initial"
            scrollToFirstError="smooth"
            @submit="onSubmit"
            label-width="150px"
            style="margin-top: 20px"
          >
            <t-form-item label="电话号码" name="num">
              <t-input
                v-model="formData.num"
                placeholder="请输入电话号码"
              ></t-input>
            </t-form-item>

            <t-form-item label="客户姓名" name="name">
              <t-input
                v-model="formData.name"
                placeholder="请输入客户姓名"
              ></t-input>
            </t-form-item>

            <t-form-item class="buttonbut" label="">
              <div class="buttonbutright">
                <!-- style="color: #f5b900;" -->
                <div>
                  <icon-svg
                    style="width: 16px; height: 16px"
                    name="icon-file-copy"
                  ></icon-svg>
                  单个导入号码不受任务名单去重功能限制
                </div>
                <t-space size="small">
                  <t-button theme="default" variant="base" type="reset"
                    >取消</t-button
                  >
                  <t-button theme="primary" type="submit">提交</t-button>
                </t-space>
              </div>
            </t-form-item>
          </t-form>
        </dk-tab-panel>
      </dk-tabs>
    </t-dialog>
  </div>
</template>

<script setup>
import { ref, defineProps, reactive } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import { PlayIcon, PauseIcon } from "tdesign-icons-vue-next";
import {
  getcreatetask,
  getexceltemplate,
  transitionUpload,
} from "@/api/callOutTasks/index.js";

const props = defineProps({
  // 默认选中的部门id
  isshow: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["eventImpNum"]);

// 获取当前日期
const now = new Date();
// 计算本周一的时间
const startOfWeek = new Date(now);
const dayOfWeek = now.getDay(); // 获取当前是星期几，0 表示星期天
const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 如果是星期天，回退到前一个星期一
startOfWeek.setDate(now.getDate() - diff);
startOfWeek.setHours(0, 0, 0, 0); // 设置为本周一的00:00:00
// 时间快捷键
const presets = reactive({
  今天: [new Date(), new Date()],
  昨天: [new Date(+new Date() - 86400000), new Date(+new Date() - 86400000)],
  本周: [startOfWeek, new Date()],
  本月: [
    new Date(new Date().getFullYear(), now.getMonth(), 1, 0, 0, 0, 0),
    new Date(),
  ],
  近7天: [new Date(+new Date() - 86400000 * 6), new Date()],
  近30天: [new Date(+new Date() - 86400000 * 29), new Date()],
});

let formData = reactive({
  name: "",
  speech: "",
  num: "",
  taskstatus: "",
  nowtime: [],
});

const form = ref(null);

const visibleCenter = ref(false);
const tasktype = ref("");
let activeTab = ref(1);

//取消
const closefn = () => {
  emit("eventImpNum", false);
  form.value.reset();
};
//提交
const onSubmit = ({ validateResult, firstError }) => {
  console.log(formData);

  if (validateResult === true) {
    MessagePlugin.success("操作成功");
    // emit('eventImpNum', false);
    console.log(formData);
    console.log(validateResult);
    visibleCenter.value = true;
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

const downloadTemplate = async () => {
  const res = await getexceltemplate();
  console.log(res);
};

const taskSubmit = (date) => {
  console.log(date);
  tasktype.value = date;
};

// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件
const onEnter = (_, { e }) => {
  e.preventDefault();
};
</script>

<style lang="scss" scoped>
.buttonbut {
  display: flex;
  justify-content: space-between;
  .buttonbutright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 550px;
  }
}
.outtimecla {
  display: flex;
  flex-direction: column;
  .outtimecla_item {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
  }
}
.play_pause {
  display: flex;
  justify-content: space-evenly;
}

:deep(.t-dialog__ctx .t-dialog) {
  max-height: 90%;
  overflow-y: scroll;
}
</style>
